<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/swiper.css" />
		<link rel="stylesheet" href="css/mint.css">
		<link rel="stylesheet" href="css/mint-style.css">
		 <script src="js/vue_resource.js"></script>
	</head>
		<script src="js/serverUrl.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/mint.js"></script>
		<script src="js/moment.js"></script>
         <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
		<style type="text/css">
			.conclusionContainer{
				display: flex;
				flex-direction: column;
				width: 100vw;
				background: white;
			}
			.detailTitle{
				width: 100vw;
				display: flex;
				justify-content: center;
				font-size: 18px;
				padding-top: 5px;
				padding-bottom: 5px;
			}
			
			.infoContainer{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-left: 15px;
				padding-right: 15px;
				font-size: 16px;
				padding-top: 10px;
				padding-bottom: 10px;
				border-top: 1px solid #e0e0e0;
			}
			.content{
				font-size: 14px;
				background-color: #f0f0f0;
				margin:0px 10px 10px 10px;
				padding: 5px;
				border-radius: 5px;
				white-space: pre-line;
			}
            .evaluation {
                text-align: center;
            }

            .star-rating {
                unicode-bidi: bidi-override;
                direction: rtl;
                font-size: 20px;
            }
            .star-rating > span {
                display: inline-block;
                position: relative;
                width: 1.1em;
                color: #F0D52D;
            }
            .star-rating > span:hover,
            .star-rating > span:hover ~ span {
                color: #F0D52D;
            }
            .star-rating > input {
                display: none;
            }

            .star-rating2 {
                unicode-bidi: bidi-override;
                direction: rtl;
                font-size: 20px;
            }
            .star-rating2 > span {
                display: inline-block;
                position: relative;
                width: 1.1em;
                color: #F0D52D;
            }
            .star-rating2 > span:hover,
            .star-rating2 > span:hover ~ span {
                color: #F0D52D;
            }
            .star-rating2 > input {
                display: none;
            }

            .star-rating3 {
                unicode-bidi: bidi-override;
                direction: rtl;
                font-size: 20px;
            }
            .star-rating3 > span {
                display: inline-block;
                position: relative;
                width: 1.1em;
                color: #F0D52D;
            }
            .star-rating3 > span:hover,
            .star-rating3 > span:hover ~ span {
                color: #F0D52D;
            }
            .star-rating3 > input {
                display: none;
            }

		</style>
	<body style="background-color: #f0f0f0;">
		<div id="app">
			<div class="conclusionContainer">
				<div class="detailTitle">{{trainingClass.courseName}}</div>
				<div class="infoContainer"><span>培训教师</span><span>{{trainingClass.teacherName}}</span></div>
				<div class="infoContainer"><span>上课日期</span> <span>{{trainingClass.startTime| formatDate}}</span></div>
                <div class="infoContainer"><span>上课时间</span> <span>{{trainingClass.startTime| formatTime}}</span></div>
                <div class="infoContainer" style="border-top: 0px solid #e0e0e0;"><span></span> <span>{{trainingClass.startTime| formatTime}}</span></div>
                <div class="infoContainer" @click.stop="toFileList(trainingClass.courseFile)"><span>培训资料</span><img style="width:15px;" src="img/ic_exam_operate_bar_next_default.png"></img></div>
                <!--<div class="infoContainer" onclick="location.href='https://www.bootcss.com'"><span>培训资料</span><img style="width:15px;" src="img/ic_exam_operate_bar_next_default.png"></img></div>-->
			</div>
			
			<div class="conclusionContainer" style="margin-top: 15px;">
                <div class="infoContainer"><span style="width:30%;">内容专业性</span>
                    <div class="evaluation">
                        <div style=" width:100%;text-align:center;">
                            <div class="star-rating">
                                <span>&#9733;</span>
                                <span>&#9733;</span>
                                <span>&#9733;</span>
                                <span>&#9733;</span>
                                <span>&#9733;</span>
                                <input type="radio" name="rating" value="5" checked>
                                <input type="radio" name="rating" value="4" >
                                <input type="radio" name="rating" value="3">
                                <input type="radio" name="rating" value="2">
                                <input type="radio" name="rating" value="1">
                            </div>
                        </div>
                    </div>
                    <span>{{trainingClass.rating1}}</span>
                </div>
                <div class="infoContainer"><span style="width:30%;">课堂呈现气氛</span>
                    <div class="evaluation">
                        <div style=" width:100%;text-align:center;">
                            <div class="star-rating2">
                                <span>&#9733;</span>
                                <span>&#9733;</span>
                                <span>&#9733;</span>
                                <span>&#9733;</span>
                                <span>&#9733;</span>
                                <input type="radio" name="rating" value="5" checked>
                                <input type="radio" name="rating" value="4" >
                                <input type="radio" name="rating" value="3">
                                <input type="radio" name="rating" value="2">
                                <input type="radio" name="rating" value="1">
                            </div>
                        </div>
                    </div>
                    <span>{{trainingClass.rating2}}</span>
                </div>
                <div class="infoContainer"><span style="width:30%;">总评</span>
                    <div class="evaluation">
                        <div style=" width:100%;text-align:center;">
                            <div class="star-rating3">
                                <span>&#9733;</span>
                                <span>&#9733;</span>
                                <span>&#9733;</span>
                                <span>&#9733;</span>
                                <span>&#9733;</span>
                                <input type="radio" name="rating" value="5" checked>
                                <input type="radio" name="rating" value="4" >
                                <input type="radio" name="rating" value="3">
                                <input type="radio" name="rating" value="2">
                                <input type="radio" name="rating" value="1">
                            </div>
                        </div>
                    </div>
                    <span>{{trainingClass.rating3}}</span>
                </div>
			</div>
			<div class="conclusionContainer" style="margin-top: 15px;">
				<div class="infoContainer" >现场照片</div>
				<div class="gally" style="margin-top: 10px;">
					<div class="photoConatiner"  v-for="(item,index) in trainingClass.courseImage">
						<img class="image" :style="{'margin-top': (index>2?'6vw':'0px')}"  :src="serverUrl+item" />
					  
					</div>
					
				</div>
			</div>
				
			
		</div>
	</body>
	
	<script type="text/javascript">
		var app = new Vue({
		  el: '#app',
		  data:{
			  trainingClass: {
			  },
		  },
		  filters:{
              formatTime (val) {
				return moment(val).format("HH:mm:ss")
			  },
              formatDate (val) {
                return moment(val).format("YYYY-MM-DD")
              }
		  },
		  created() {
              window.getTrainingClass = this.getTrainingClass
		  },
		  methods:{
			  getTrainingClass (trainingClass){
				this.trainingClass = trainingClass
                this.trainingClass.courseImage = JSON.parse(trainingClass.courseImage)
                const starRating = document.querySelector('.star-rating');
                const radios = starRating.querySelectorAll('input[type="radio"]');
                function showRating(rat) {
                  //const rating = starRating.dataset.rating;
                  radios.forEach((radio, index) => {
                      const star = starRating.children[4-index];
                      if (index < rat) {
                          star.style.color = '#F0D52D';
                      } else {
                          star.style.color = '#CCC';
                      }
                  });
                }
                showRating(trainingClass.rating1); // 默认显示评分

                const starRating2 = document.querySelector('.star-rating2');
                const radios2 = starRating2.querySelectorAll('input[type="radio"]');
                function showRating2(rat) {
                  //const rating = starRating.dataset.rating;
                  radios2.forEach((radio, index) => {
                      const star = starRating2.children[4-index];
                      if (index < rat) {
                          star.style.color = '#F0D52D';
                      } else {
                          star.style.color = '#CCC';
                      }
                  });
                }
                showRating2(trainingClass.rating2); // 默认显示评分

                const starRating3 = document.querySelector('.star-rating3');
                const radios3 = starRating3.querySelectorAll('input[type="radio"]');
                function showRating3(rat) {
                  //const rating = starRating.dataset.rating;
                    radios3.forEach((radio, index) => {
                      const star = starRating3.children[4-index];
                      if (index < rat) {
                          star.style.color = '#F0D52D';
                      } else {
                          star.style.color = '#CCC';
                      }
                  });
                }
                  showRating3(trainingClass.rating3); // 默认显示评分
			  },
              toFileList (courseFile) {
                  if(null == courseFile){
                      WebViewJavascriptBridge.callHandler('noCourseFile',function(response) {

                      });
                  }else{
                      let params = {
                          fileList:courseFile
                      }
                      WebViewJavascriptBridge.callHandler('toFileList',params,function(response) {

                      });
                  }

              },
			  toNewsDetail (dataId){
				alert(dataId)  
			  }
		  }
		})		
		</script>
</html>
